<template>
  <div>
    <a-modal
    title="表单设计"
    :visible="visible"
    @cancel="hideModal"
    :maskClosable="false"
    destroyOnClose
    width="100%"
    :footer="null"
    :mask="false"
    :dialogStyle="{ top: 0 }"
    style="overflow: hidden;"
    :bodyStyle="{
      height: 'calc(100vh - 55px)',
      overflow: 'auto',
      padding: '0px',
    }"
  >
    <a-spin :spinning="spinning">
      <designer-index ref="designerIndex" @save="save"/>
    </a-spin>
  </a-modal>
  </div>
</template>

<script>
import DesignerIndex from '@/pages/designer/index'
import { widgetsConf } from '@/pages/designer/config/config'
import { deepClone, widgetRandomId } from '@/utils/tools'
export default {
  components: { DesignerIndex },
  props: [],
  data() {
    return {
      spinning: true,
      visible: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.formData = Object.assign({}, this.defaultFormData)
  },
  mounted() {},
  methods: {

    //     fieldName: "id"
    // fieldNote: "主键"
    // fieldType: "Long"
    // formRequired: true
    // formType: "text"
    // inForm: true
    // inSearch: false
    // inTable: true
    // key: 0

    showModal(data) {
      this.visible = true
      const dataSource = []
      data.forEach(v => {
        if (v.inForm) {
          const obj = deepClone(this.getConfig(v.formType)[0])
          Object.assign(obj, {
            id: new Date().getTime() + '-' + widgetRandomId(5),
            key: v.fieldName,
            label: v.fieldNote,
            required: v.formRequired
          })
          dataSource.push(obj)
        }
      })
      setTimeout(() => {
        this.$refs.designerIndex.init(dataSource, {
          formRef: 'myForm', // 表单$refs
          formModel: 'formData', // 表单模型
          formRules: 'rules', // 校验模型
          layout: 'horizontal', // 表单布局 horizontal | vertical | inline
          showType: '2', // 展示形式 ，1页面，2全屏弹窗，3弹窗，4抽屉
          labelCol: 4, // label 宽度
          wrapperCol: 20, // 组件宽度
          labelAlign: 'right', // label 标签的文本对齐方式 left|right
          width: '100%',
          colon: true, // 表示是否显示 label 后面的冒号
          showConfirmBtn: true, // 显示确定按钮
          showCancelBtn: true, // 显示取消按钮
          confirmText: '确定', // 确定按钮名称
          cancelText: '取消' // 取消按钮名称
        })
        this.spinning = false
      }, 1000)
    },
    showHistory(data, formConf) {
      this.visible = true
      setTimeout(() => {
        this.$refs.designerIndex.init(data, formConf)
        this.spinning = false
      }, 1000)
    },

    getConfig(type) {
      const components = widgetsConf[0].list.concat(widgetsConf[1].list).concat(widgetsConf[2].list)
      return components.filter(v => v.type === type)
    },
    save(c) {
      this.$emit('success', c)
      this.hideModal()
    },
    hideModal() {
      this.confirmLoading = false
      this.visible = false
    },
    handleOk() {
      this.confirmLoading = true
      this.$refs['myForm'].validate((valid) => {
        if (!valid) {
          this.confirmLoading = false
          console.log('error')
        } else {
          // TODO 提交表单
          console.log(this.formData)
          this.confirmLoading = false
          this.hideModal()
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
</style>
